<template>
   <div class="register">
    <div class="vant">
      <van-form>
        <van-field
          v-model="account"
          name="用户名"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="psw"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="userRegister(account, psw)"
            >注册</van-button
          >
        </div>
      </van-form>

      <router-link
        tag="p"
        :to="'/login'"
        class="denglu"
      >
      已有账号，返回登录页面 &gt;
      </router-link>

    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      account: "",
      psw: "",
    };
  },

  methods: {
    userRegister(account, psw) {
      if (account == "" || psw == "") {
        Toast("账号或密码不能为空");
      } else {
        let userList = localStorage.userList
          ? JSON.parse(localStorage.userList)
          : [];

        let resultsto = userList.find((c) => c.account == account);

        if (!resultsto) {
          localStorage.userList = JSON.stringify([
            ...userList,
            {
              account: account,
              psw: psw,
            },
          ]);

          Toast.success("注册成功");
          this.$router.push({ name: "login" });
        } else if (resultsto) {
          Toast("账号已注册");
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  height: 100vh;
  width: 100vw;
  background-image: url(../assets/img/registerbg.jpg);
  background-size: 100% 100%;
}

.vant {
  padding-top: 200px;
}

.denglu {
  color: blue;
  margin-left: 25%;
  margin-top: 60px;
  text-decoration:underline
}
</style>
